﻿<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head th:replace="fragment/globalComponent::commonHead(~{::title},~{::style},~{::link})">
    <title>GoblinCwl - 博客</title>
    <link rel="stylesheet" th:href="@{/plugins/editormd/css/editormd.preview.css}">
    <style>
        /*文章标签间距*/
        #tabsRow .badge {
            margin-right: 0.2rem;
        }

        /*文章时间*/
        #blogTime {
            color: #8d8c8c;
            padding: 0.2rem 0 0.1rem 0.1rem;
        }

        /*文章内容块*/
        #view-editormd {
            background-color: #eef7fa;
            box-shadow: 0 0.05rem 0.3rem rgba(0, 0, 0, 0.3), 0 0.0005rem 0.005rem rgba(0, 0, 0, 0.2);
        }

        /*分割线*/
        .divider {
            position: relative;
            margin-top: 2rem;
            margin-bottom: 2rem;
            height: 1px;
        }

        /*分割线*/
        .div-transparent:before {
            content: "";
            position: absolute;
            top: 0;
            width: 100%;
            height: 1px;
            background-color: darkgray;
        }

        .footer {
            padding-bottom: 2rem;
        }

        /*目录*/
        .markdown-toc ul,
        .markdown-toc ul li ul,
        .markdown-toc ul li ul li ul,
        .markdown-toc ul li ul li ul li ul,
        .markdown-toc ul li ul li ul li ul li ul,
        .markdown-toc ul li ul li ul li ul li ul li ul {
            padding-left: 1rem;
            list-style: '- ';

        }

        #custom-toc-container {
            padding: 1rem;
            font-size: 13px;
            background-color: #e8fbf2;
            box-shadow: 0 0.05rem 0.3rem rgba(0, 0, 0, 0.3), 0 0.0005rem 0.005rem rgba(0, 0, 0, 0.2);
        }

        .cancelReply {
            color: red;
            cursor: pointer
        }

        .cancelReply:hover {
            text-decoration: underline;
        }

        /*评论区*/
        .comment {
            padding: 0.8rem;
            font-size: 14px;
            box-shadow: 0 0.05rem 0.3rem rgba(0, 0, 0, 0.3), 0 0.0005rem 0.005rem rgba(0, 0, 0, 0.2);
            cursor: pointer;
            overflow: hidden;
            margin-top: 0.5rem
        }

        /*头像<a>*/
        a.commentProfile {
            float: left;
            width: 6.5%;
            padding-right: 0.5rem;
        }

        /*头像图片*/
        .commentProfileImg {
            width: 3.3rem;
            height: 3.3rem;
            border-radius: 1rem;
            transition: 0.5s;
            box-shadow: 0 0.05rem 0.3rem rgba(0, 0, 0, 0.3), 0 0.0005rem 0.005rem rgba(0, 0, 0, 0.2);
            background: url("/images/imgLoading.gif") no-repeat center center;
        }

        .commentProfileImg:hover {
            transition: 0.5s;
            -moz-transform: rotate(-180deg);
            -webkit-transform: rotate(-180deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }

        /*评论内容区*/
        .comment > .content {
        }

        .comment > .content > div > .commentNickName {
            font-weight: bold;
        }

        .comment > .content > div > .commentSendTime {
            color: darkgray;
            font-size: 0.6rem
        }

        /*评论表单输入框*/
        .commentFormInput {
            margin-top: 0.5rem;
            border-radius: 0;
        }

        /*表单选择头像 预览*/
        .fromProfile {
            width: 3.3rem;
            height: 3.3rem;
            border-radius: 1rem;
            transition: 0.5s;
            box-shadow: 0 0.05rem 0.3rem rgba(0, 0, 0, 0.3), 0 0.0005rem 0.005rem rgba(0, 0, 0, 0.2);
            margin: 0.5rem 0.5rem 0.3rem;
            float: left;
            background: url("/images/imgLoading.gif") no-repeat center center;
        }

        /*随机头像要选择*/
        .randomComicProfileImage {
            cursor: pointer;
            transition: 0.2s;
        }

        .randomComicProfileImage:hover {
            position: relative;
            transition: 0.5s;
            bottom: 0.2rem;
        }

    </style>
</head>
<body>
<!-- 左侧侧边栏 -->
<div th:replace="fragment/blogComponent::leftSiderBar"></div>
<!--隐藏域获取文章ID-->
<input type="hidden" th:value="${id}" id="blogId"/>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <div class="content">
        <!-- 顶部导航 -->
        <div th:replace="fragment/globalComponent::topHeader"></div>


        <div class="container" style="float: left;width: 100%">
            <div class="header" style="margin-left: 1rem;margin-top: 2rem">
                <div class="row">
                    <h1 style="font-weight: bold" id="contentTitle"></h1>
                    <h5 id="blogTime"></h5>
                </div>
                <div id="tabsRow" class="row">
                </div>
            </div>
            <br>
            <div class="blogBody">
                <div class="row">
                    <div class="col-lg-9">
                        <div id="view-editormd"></div>
                    </div>
                    <div class="col-lg-3" style="padding-left: 0">
                        <div id="custom-toc-container"></div>
                    </div>
                </div>

            </div>
            <div class="split-line">
                <div class="row">
                    <div class="wrapper col-lg-9">
                        <div class="divider div-transparent"></div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div id="commentDiv">
                    <!--评论区-->
                </div>
                <div class="comment col-lg-9" style="margin-bottom: 1rem">
                    <form id="commentFormId" class="form commentForm">
                        <div class="row">
                            <div class="form-group col-lg-1 width-7">
                                <img id="formProfileImg" alt="选择头像"
                                     src="https://ui-avatars.com/api/?font-size=0.33&length=2&background=ffffff&name=头像"
                                     class="commentProfileImg" onclick="chooseProfile()">
                            </div>
                            <div class="form-group col-lg-3 width-31">
                                <label class="sr-only" for="nickName"></label>
                                <input type="text" class="form-control commentFormInput required"
                                       id="nickName"
                                       oninput='inputValidate($(this))' pos="b"
                                       placeholder="昵称">
                            </div>
                            <div class="form-group col-lg-4 width-31">
                                <label class="sr-only" for="email"></label>
                                <input type="email" class="form-control commentFormInput" id="email"
                                       placeholder="邮箱(收到回复将会邮件通知)">
                            </div>
                            <div class="form-group col-lg-4 width-31">
                                <label class="sr-only" for="website"></label>
                                <input type="text" class="form-control commentFormInput" id="website"
                                       oninput='inputValidate($(this))' pos="b"
                                       placeholder="网址(可通过点击头像跳转)">
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-lg-12">
                                <label class="sr-only" for="commentContent"></label>
                                <textarea id="commentContent" class="form-control no-border-radio required" rows="3"
                                          oninput='inputValidate($(this))'
                                          style="resize: vertical"></textarea>
                            </div>
                        </div>
                        <button class="btn btn-warning no-border-radio" type="button">😀</button>
                        <button class="btn btn-success pull-right no-border-radio" type="button"
                                onclick="sendComment()">评论
                        </button>
                    </form>
                </div>

            </div>
        </div>

    </div>
    <input type="hidden" id="profileUrl"/>
</div>
<div th:replace="fragment/globalComponent::commonFoot(~{::script})">
    <script type="text/javascript" th:src="@{/plugins/editormd/lib/marked.min.js}"></script>
    <script type="text/javascript" th:src="@{/plugins/editormd/lib/prettify.min.js}"></script>
    <script type="text/javascript" th:src="@{/plugins/editormd/lib/raphael.min.js}"></script>
    <script type="text/javascript" th:src="@{/plugins/editormd/lib/underscore.min.js}"></script>
    <script type="text/javascript" th:src="@{/plugins/editormd/lib/sequence-diagram.min.js}"></script>
    <script type="text/javascript" th:src="@{/plugins/editormd/lib/flowchart.min.js}"></script>
    <script type="text/javascript" th:src="@{/plugins/editormd/lib/jquery.flowchart.min.js}"></script>
    <script type="text/javascript" th:src="@{/plugins/editormd/editormd.min.js}"></script>

    <script type="text/javascript" th:inline="javascript">
        let editorMdView;
        let blogId;

        $(function () {
            //设置昵称
            const $nickName = $("#nickName");
            const localNickName = localStorage.getItem("nickName");
            if (localNickName != null && localNickName !== '') {
                $nickName.val(localNickName);
                $nickName.css("border-color", "green");
            }
            //设置头像
            if (localStorage.getItem("profileUrl") != null) {
                $("#formProfileImg").attr("src", localStorage.getItem("profileUrl"))
            }
            //导航
            $("#blogBackLi").css("display", "block");
            $("#blogBackLi").addClass("active");

            blogId = $("#blogId").val();
            ajaxHttp({
                type: "GET",
                url: ctx + "/blog/query/" + blogId,
                success: function (res) {
                    let content = '';
                    if (res.data != null) {
                        const data = res.data;

                        //网页标签标题
                        $("title").html(data.title);
                        //文章标题
                        $("#contentTitle").text(data.title)
                        //文章时间
                        $("#blogTime").text('发布: ' + data.releaseTime + '\t更新: ' + data.updateTime)
                        //文章标签
                        if (data.blogTabsList != null) {
                            var tabsHtml = '';
                            for (let j = 0; j < data.blogTabsList.length; j++) {
                                const tabs = data.blogTabsList[j];
                                tabsHtml += '' +
                                    '<span class="badge" style="background-color: ' + tabs.color + '">' + tabs.name + '</span>';
                            }
                            $("#tabsRow").html(tabsHtml);
                        }

                        //文章内容
                        if (data.content == null) {
                            data.content = '';
                        }
                        content = data.content;
                    }
                    initPreview(content);
                    if (blogId != null) {
                        //加载评论区
                        initComment(blogId);
                    }
                },
                successFalse: function () {
                    window.location.replace("/404");
                }
            });
        });

        /*渲染文章*/
        function initPreview(content) {
            editorMdView = editormd.markdownToHTML("view-editormd", {
                markdown: content,
                htmlDecode: "style,script,iframe", // you can filter tags decode
                tocContainer: "#custom-toc-container",
                tocDropdown: false,
                emoji: true,
                taskList: true,
                tex: true, // 默认不解析
                flowChart: true, // 默认不解析
                sequenceDiagram: true, // 默认不解析
            });
        }

        /*加载评论*/
        function initComment(blogId) {
            ajaxHttp({
                type: "GET",
                url: ctx + "/blog/comment/listAll?blogId=" + blogId,
                success: function (res) {
                    if (res.data != null) {
                        const data = res.data;
                        let commemntHtml = '';
                        for (let i = 0; i < data.length; i++) {
                            const row = data[i];
                            commemntHtml += '' +
                                '<div class="col-lg-9 comment">' +
                                '    <a ' + (row.website == null || row.website === '' ? '' : 'href="' + row.website + '" target="_blank"') + ' class="commentProfile">' +
                                '        <img class="commentProfileImg" alt="' + row.nickName + '" src=' + (row.profileUrl == null || row.profileUrl === '' ? getUiAvatarsUrl('random', 'auto', row.nickName) : row.profileUrl) + '>' +
                                '    </a>' +
                                '    <div class="content" onclick="replyComment(\'' + row.id + '\',\'' + row.nickName + '\')">' +
                                '        <div><span class="commentNickName">' + row.nickName + '</span></div>' +
                                '        <div><span class="commentSendTime">' + row.sendTime + '</span></div>' +
                                '        <div><span>' + row.content + '</span></div>' +
                                '    </div>';
                            //子评论
                            if (row.childrenList != null) {
                                for (let j = 0; j < row.childrenList.length; j++) {
                                    const childrenRow = row.childrenList[j];
                                    commemntHtml += '' +
                                        '<div class="comment" >' +
                                        '    <a ' + (childrenRow.website == null || childrenRow.website === '' ? '' : 'href="' + childrenRow.website + '" target="_blank"') + 'class="commentProfile">' +
                                        '        <img class="commentProfileImg" alt="' + childrenRow.nickName + '" src=' + (childrenRow.profileUrl == null || childrenRow.profileUrl === '' ? getUiAvatarsUrl('random', 'auto', childrenRow.nickName) : childrenRow.profileUrl) + '>' +
                                        '    </a>' +
                                        '    <div class="content" onclick="replyComment(\'' + row.id + '\',\'' + childrenRow.nickName + '\')">' +
                                        '        <div><span class="commentNickName">' + childrenRow.nickName + '</span></div>' +
                                        '        <div><span class="commentSendTime">' + childrenRow.sendTime + '</span></div>' +
                                        '        <div><span>' + childrenRow.content + '</span></div>' +
                                        '    </div>' +
                                        '</div>';
                                }
                            }
                            commemntHtml += '' +
                                '</div>';
                        }

                        $("#commentDiv").html(commemntHtml);
                    }
                },
            });
        }

        /*评论*/
        function sendComment() {
            //校验邮箱
            const $email = $("#email");
            if ($email.val() != null && $email.val() !== '') {
                const emailReg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                if (!emailReg.test($email.val())) {
                    checkFail($email, '请输入正确的邮箱');
                    return
                }
            }
            //校验网站
            const $website = $("#website");
            if ($website.val() != null && $website.val() !== '') {
                const websiteReg = /([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|[wW]{3}.|[wW][aA][pP].|[fF][tT][pP].|[fF][iI][lL][eE].)[-A-Za-z0-9+&@#\/%?=~_|!:,.;]+[-A-Za-z0-9+&@#\/%=~_|]/;
                if (!websiteReg.test($website.val())) {
                    checkFail($website, "请输入正确的网址-http(s)/www开头")
                    return;
                }
                if (!$website.val().startsWith("http")) {
                    $website.val('http://' + $website.val())
                }
            }


            if (fromValidate($("#commentFormId"))) {
                const winId = xtip.confirm("确认发送评论？", function () {
                    let content = $("#commentContent").val();

                    //有父ID时为回复，添加前缀
                    const parentId = $("#parentId").val();
                    if (parentId != null) {
                        content = '回复@' + $("#replayNickNameSpan").text() + "： " + content;
                    }

                    //没有头像时使用昵称生成默认头像，并缓存
                    let profileUrl = $("#profileUrl").val();
                    if (profileUrl == null || profileUrl === "") {
                        profileUrl = getUiAvatarsUrl();
                        localStorage.setItem("profileUrl", profileUrl);
                        $("#formProfileImg").attr("src", profileUrl);
                        $("#profileUrl").val(profileUrl);
                    }

                    //缓存昵称
                    localStorage.setItem("nickName", $("#nickName").val());
                    //TODO 修改数据库和redis昵称
                    ajaxHttp({
                        type: "POST",
                        url: ctx + "/blog/comment/add",
                        data: {
                            blogId: blogId,
                            parentId: parentId,
                            nickName: $("#nickName").val(),
                            email: $email.val(),
                            website: $website.val(),
                            content: content,
                            profileUrl: profileUrl
                        },
                        winId: winId,
                        success: function (res) {
                            xtip.msg(res.msg, {icon: 's', type: 'w'});
                            //刷新评论区
                            initComment(blogId);
                            //清空表单
                            $("#commentFormId")[0].reset()
                            $("#nickName").val(localStorage.getItem("nickName"))
                            //取消回复
                            $('#replyComment').remove();
                        },
                    });
                }, {icon: ['', '#5cb85c']});
            }
        }

        /*回复*/
        function replyComment(id, nickName) {
            const $replyComment = $("#replyComment");
            if ($replyComment.length > 0) {
                $("#parentId").val(id);
                $("#replayNickNameSpan").text(nickName);
            } else {
                const html = '' +
                    '<div id="replyComment" class="row">\n' +
                    '    <div class="form-group col-lg-12">\n' +
                    '        <input type="hidden" id="parentId" value="' + id + '"/>\n' +
                    '        <span id="replyNickName" style="font-weight: bold">回复：@<span id="replayNickNameSpan">' + nickName + '</span>:</span>\n' +
                    '        <span class="pull-right cancelReply"\n' +
                    '              onclick="$(\'#replyComment\').remove()">取消回复</span>\n' +
                    '    </div>\n' +
                    '</div>';
                $("#commentContent").before($(html));
            }
            $("#commentContent").focus();

        }

        function getUiAvatarsUrl(backgroudColor, color, nickname) {
            backgroudColor = (backgroudColor == null || backgroudColor === '' ? '&background=333' : '&background=' + backgroudColor);
            color = (color == null || color === '' ? '&color=ffffff' : (color === 'auto' ? '' : '&color=' + color));
            nickname = (nickname == null || nickname === '' ? '&name=' + $("#nickName").val() : '&name=' + nickname);
            return "https://ui-avatars.com/api/?font-size=0.33&length=1" + backgroudColor + color + nickname;
        }

        function getQQProfileUrl(qq) {
            return "https://q1.qlogo.cn/g?b=qq&nk=" + (qq == null || qq === "" ? '1' : qq) + "&s=100";
        }

        function getTwdneProfileImg() {
            return "https://www.thiswaifudoesnotexist.net/v2/example-" + randomInt(199999, 0) + ".jpg";
        }

        function changeTwdneProfileImg() {
            const $randomComicProfileImage = $(".randomComicProfileImage");
            $randomComicProfileImage.attr("src", '')
            for (let i = 0; i < $randomComicProfileImage.length; i++) {
                const $randomComicProfileImageElement = $($randomComicProfileImage[i]);
                $randomComicProfileImageElement.attr("src", getTwdneProfileImg())
            }
        }


        /**选择头像*/
        let chooseProfileWinId = null;

        function chooseProfile() {
            if (chooseProfileWinId == null) {
                chooseProfileWinId = xtip.tips(
                    '<a class="" href="javascript:void(0)" onclick="nickNameGenProfile()">昵称生成</a><br>' +
                    '<a class="" href="javascript:void(0)" onclick="qqGenProfile()">QQ头像</a><br>' +
                    '<a class="" href="javascript:void(0)" onclick="randomComicProfile()">随机漫头</a><br>' +
                    '<a class="" href="javascript:void(0)" onclick="urlProfile()">图片地址</a><br>' +
                    ''
                    , 'formProfileImg', {
                        bgcolor: 'rgb(255,255,255)',
                        times: 3,
                        pos: 't',
                        isAutoClose: false,
                        width: '100rem'
                    });
                $("#" + chooseProfileWinId).css("max-width", "100%")
            } else {
                xtip.close(chooseProfileWinId)
                chooseProfileWinId = null;
            }

            //点击其他地方关闭tip
            $(document).bind('click', function (e) {
                const ae = e || window.event; //浏览器兼容性
                var elem = ae.target || ae.srcElement;
                while (elem) { //循环判断至跟节点，防止点击的是div子元素
                    if (elem.id && elem.id === 'formProfileImg') {
                        return;
                    }
                    elem = elem.parentNode;
                }
                xtip.close(chooseProfileWinId);
                chooseProfileWinId = null;
            });
        }

        //昵称获取头像
        function nickNameGenProfile() {
            const winId = xtip.win({
                type: 'confirm',
                btn: ['确定', '取消'],
                icon: ['', '#5bc0de'],
                tip:
                    '<form class="form-horizontal validateForm">' +
                    '   <img alt="预览" class="fromProfile " id="nickNameProfileImg" src="' + getUiAvatarsUrl() + '">' +
                    '   <div class="row">' +
                    '       <div class="col-lg-4">' +
                    '           <label for="nickNameProfileInputBgColor">背景颜色 </label>' +
                    '           <input id="nickNameProfileInputBgColor" class="form-control no-border-radio" type="color"' +
                    '                oninput="$(\'#nickNameProfileImg\').attr(\'src\',getUiAvatarsUrl(this.value.substr(1),$(\'#nickNameProfileInputColor\').val().substr(1)))">' +
                    '       </div>' +
                    '       <div class="col-lg-4">' +
                    '           <label for="nickNameProfileInputColor">文字颜色 </label>' +
                    '           <input id="nickNameProfileInputColor" class="form-control no-border-radio" value="#ffffff" type="color" style="top: 0.15rem"' +
                    '                oninput="$(\'#nickNameProfileImg\').attr(\'src\',getUiAvatarsUrl($(\'#nickNameProfileInputBgColor\').val().substr(1),this.value.substr(1)))">' +
                    '       </div>' +
                    '   </div>' +
                    '</form>'
                ,
                title: "昵称生成头像",
                maxWidth: '100%',
                shadeClose: false,
                btn1: function () {
                    saveImg(winId, $("#nickNameProfileImg").attr("src"))
                }
            });
        }

        //QQ头像
        function qqGenProfile() {
            const winId = xtip.win({
                type: 'confirm',
                btn: ['确定', '取消'],
                icon: ['', '#5bc0de'],
                tip:
                    '<form class="form-horizontal validateForm">' +
                    '   <img alt="预览" class="fromProfile" id="qqProfileImg" src="' + getQQProfileUrl('1') + '">' +
                    '   <div style="float: left;padding-left: 0.5rem">' +
                    '       <div class="">' +
                    '           <label for="qqProFileInput">QQ号: </label>' +
                    '           <input id="qqProFileInput" class="form-control no-border-radio" type="text" placeholder="你的QQ号"' +
                    '                oninput="$(\'#qqProfileImg\').attr(\'src\',getQQProfileUrl(this.value))">' +
                    '       </div>' +
                    '   </div>' +
                    '</form>'
                ,
                title: "获取QQ头像",
                maxWidth: '100%',
                shadeClose: false,
                btn1: function () {
                    saveImg(winId, $("#qqProfileImg").attr("src"));
                }
            });
        }

        //随机女漫头
        let randomComicProfileWindId = null;

        function randomComicProfile() {
            randomComicProfileWindId = xtip.win({
                type: 'confirm',
                btn: ['重随', '取消'],
                icon: ['', '#5bc0de'],
                tip:
                    '<form class="form-horizontal validateForm">' +
                    '   <img alt="预览" class="fromProfile randomComicProfileImage" src="' + getTwdneProfileImg() + '" onclick="checkRandomComicProfile(this.src)">' +
                    '   <img alt="预览" class="fromProfile randomComicProfileImage" src="' + getTwdneProfileImg() + '" onclick="checkRandomComicProfile(this.src)">' +
                    '   <img alt="预览" class="fromProfile randomComicProfileImage" src="' + getTwdneProfileImg() + '" onclick="checkRandomComicProfile(this.src)">' +
                    '   <img alt="预览" class="fromProfile randomComicProfileImage" src="' + getTwdneProfileImg() + '" onclick="checkRandomComicProfile(this.src)">' +
                    '</form>'
                ,
                title: "随机动漫(女) - 点击选择",
                width: '310px',
                maxWidth: '100%',
                shadeClose: false,
                btn1: function () {
                    changeTwdneProfileImg()
                }
            });
        }

        function checkRandomComicProfile(url) {
            saveImg(randomComicProfileWindId, url);
        }

        //自定义地址头像
        function urlProfile() {
            const winId = xtip.win({
                type: 'confirm',
                btn: ['确定', '取消'],
                icon: ['', '#5bc0de'],
                tip:
                    '<form class="form-horizontal validateForm">' +
                    '   <img alt="预览" class="fromProfile" id="customProfileImage" src="' + getUiAvatarsUrl('ffffff') + '" onerror="errorImg(this)">' +
                    '   <div style="float: left;padding-left: 0.5rem">' +
                    '       <div class="">' +
                    '           <label for="customProfileInput">图片地址: </label>' +
                    '           <input id="customProfileInput" class="form-control no-border-radio" type="text" placeholder="允许访问的图片链接"' +
                    '                oninput="$(\'#customProfileImage\').attr(\'src\',this.value)">' +
                    '       </div>' +
                    '   </div>' +
                    '</form>'
                ,
                title: "图片地址",
                maxWidth: '100%',
                shadeClose: false,
                btn1: function () {
                    saveImg(winId, $("#customProfileImage").attr("src"))
                }
            });
        }

        /*无法加载图片处理*/
        function errorImg(elem) {
            elem.src = getUiAvatarsUrl('ffffff');
            xtip.tips('无法获取图片', 'customProfileImage', {
                    bgcolor: 'red',
                    pos: 'l'
                }
            )
        }

        /*保存头像*/
        function saveImg(winId, url) {
            $("#formProfileImg").attr("src", url)
            $("#profileUrl").val(url)
            xtip.close(winId);
            localStorage.setItem("profileUrl", url)
        }
    </script>
</div>
</body>
</html>